<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>websocketTest</title>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/2.1.3/jquery.js"></script>
    <script src="https://cdn.bootcss.com/sockjs-client/1.3.0/sockjs.js"></script>
    <script src="https://cdn.bootcss.com/stomp.js/2.3.3/stomp.js"></script>
</head>
<body>
<!--https://blog.csdn.net/zl_momomo/article/details/84251704-->
<button id="connect" class="btn btn-default" type="submit">Connect</button>
<button id="disconnect" class="btn btn-default" type="submit">Disconnect</button>
<div class="form-group">
    <label for="name">What is your name?</label>
    <input type="text" id="name" class="form-control" placeholder="Your name here...">
</div>
<button id="send" class="btn btn-default" type="submit">Send</button>


</body>
<!--<script src="https://cdn.bootcss.com/sockjs-client/1.3.0/sockjs.js"></script>
<script src="https://cdn.bootcss.com/stomp.js/2.3.3/stomp.js"></script>-->
<!--<script src="https://cdn.jsdelivr.net/npm/sockjs-client@1/dist/sockjs.min.js"></script>
<script src="https://cdn.bootcss.com/stomp.js/2.3.3/stomp.js"></script>-->
<script>
    /*var socket = new SockJS("/spring-websocket-portfolio/portfolio");
    var stompClient = webstomp.over(socket);*/

    var stompClient = null;

    /**
     * 建立连接并订阅消息
     * @returns {*}
     */
    function connect(){
        var subscription;
        //var socket = new WebSocket('ws://127.0.0.1:8080/portfolio');
        var socket = new SockJS('http://127.0.0.1:9900/msg');
        //var socket = new WebSocket('ws://127.0.0.1:9900/msg');
        stompClient = Stomp.over(socket);
        stompClient.connect({},function (message) {
            if(message.body){
                console.log("got message with body " + message.body);
            }else {
                console.log("get empty message");
            }
            //订阅一个目的地
            //STOMP消息的body必须为字符串
            subscription = stompClient.subscribe('/topic/greetings',function(msg){
                console.log("接受到java后台发送的消息，" + msg.body);
            });
            subscription = stompClient.subscribe('/topic/zhuzhu',function(msg){
                console.log("zhuzhu接受到java后台发送的消息，" + msg.body);
            });
            subscription = stompClient.subscribe('/queue/one',function(msg){
                console.log("oneone接受到java后台发送的消息，" + msg.body);
            });

        })

        return subscription;
    }

    /**
     * 中止订阅消息
     */
    function unsubscription(subscription){
        if(subscription){
            subscription.unsubscribe();
        }
    }

    /**
     * 断开连接
     */
    function  disconnect() {
        if (stompClient !== null) {
            stompClient.disconnect();
        }
        console.log("Disconnected");
    }

    function sendName(){
        //STOMP消息的body必须为字符串
        stompClient.send('/app/hello',{},JSON.stringify({'username':$("#name").val()}));
        //直接发送数据，不被拦截
        //stompClient.send('/topic/greeting',{},JSON.stringify({'username':$("#name").val()}));
    }

    $(function(){
        $( "#connect" ).click(function() { connect(); });
        $( "#disconnect" ).click(function() { disconnect(); });
        $( "#send" ).click(function() { sendName(); });

    })

</script>
</body>
</html>